<template>
  <div class="app-container app-container-full default-bg-color">
    <base-grid ref="baseGrid" :exColumns="exColumns" @productChange="onProductChange">
      <template #tbar>
        <el-button type="success" @click="onAdd()">
          <i-ep-plus />
          新增
        </el-button>
        <el-button type="danger" @click="handleDelete()">
          <i-ep-delete />
          删除
        </el-button>
      </template>
      <template #column_oper_render="{ row }">
        <el-button type="success" link size="small" @click="onAdd(row.id)">
          <i-ep-edit />
          新增
        </el-button>
        <el-button type="primary" link size="small" @click="onEdit(row.id)">
          <i-ep-edit />
          编辑
        </el-button>
        <el-button type="primary" link size="small" @click="handleDelete(row.id)">
          <i-ep-delete />
          删除
        </el-button>
      </template>
    </base-grid>
    <!-- 弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body @opened="onOpenDialog" @close="closeDialog">
      <base-form :id="dataId" :product-id="productId" ref="baseForm" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">保 存</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import { deleteById } from '@/api/system/renderConfig/index';
  import BaseGrid from './grid.vue';
  import BaseForm from './form.vue';

  const dialog = reactive({
    title: '渲染配置',
    type: 'add',
    parentId: '',
    visible: false,
  });
  const dataId = ref('');
  const productId = ref('');

  const exColumns = [{ field: 'oper', title: '操作', slots: { default: 'column_oper_render' } }];

  const baseGrid = ref(BaseGrid);
  const baseForm = ref(BaseForm);

  function onAdd(parentId) {
    if (!productId.value) {
      ElMessage.error('请选择项目');
      return;
    }
    dialog.parentId = parentId;
    dialog.visible = true;
    dialog.type = 'add';
  }

  function onEdit(id) {
    dataId.value = id;
    dialog.type = 'edit';
    dialog.visible = true;
  }

  function onOpenDialog() {
    if (dialog.type === 'add') {
      let funData = {
        id: '',
        parentId: dialog.parentId,
        productId: productId.value,
      };
      baseForm.value.setValue(funData);
    }
  }

  function handleDelete(id) {
    let ids = [];
    if (!id) {
      let selects = baseGrid.value.baseGrid.getCheckboxRecords();
      if (!selects) {
        ElMessage.warning('请选择要删除的数据');
        return;
      }
      for (const item of selects) {
        ids.push(item.id);
      }
    } else {
      ids.push(id);
    }

    deleteById(ids, true).then(() => {
      ElMessage.success('删除成功');
      baseGrid.value.reload();
    });
  }

  function handleSubmit() {
    baseForm.value.save();
  }

  function onProductChange(data) {
    productId.value = data;
  }

  function closeDialog() {
    dialog.visible = false;
    baseGrid.value.reload();
    dataId.value = '';
  }
</script>
<style lang=""></style>
